<template>
<el-dialog
    class="bulletin-box"
    v-model="isShowEdit"
    width="1400px"
    destroy-on-close
    :close-on-click-modal="false"	
    :close-on-press-escape="false"
    draggable 
    :center="true"
  >
  <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            status-icon
        >
            <el-form-item label="公告内容" prop="content">
                <el-input v-model="ruleForm.content" type="textarea" autosize clearable  placeholder="请输入公告内容" />
            </el-form-item>
            <el-form-item>
                <el-button type="info"  @click="submitBulletin(true)" round><Icon icon="edit" size="25px" right="5px" />存草稿</el-button>
                <el-button type="success" @click="submitBulletin(false)" round><Icon icon="publish-light" right="5px" />发布</el-button>
            </el-form-item>
        </el-form>
  </el-dialog>
  <div class="bulletin-info-container">
  <div class="add-wrapper">
        <el-button type="warning"  @click="addItem()" round><Icon icon="add" size="25px" right="5px" />添加</el-button>
    </div>
    <el-divider />
    <div class="bulletin-wrapper">
            <el-table
                class="bulletin-table"
                :data="tableData"
                :border="true"
            >
                <el-table-column prop="id" label="ID" width="100" :align="'center'" />
                <el-table-column prop="content" label="内容" min-width="600" :align="'center'" />
                <el-table-column prop="status" label="状态" width="90" :align="'center'" >
                    <template #default="scope">  
                        <el-tag effect="dark" :type="scope.row.status==='草稿'?'info':scope.row.status === '已撤销'?'danger':'success'">
                        {{ scope.row.status }}
                        </el-tag>
                    </template>  
                </el-table-column>
                <el-table-column prop="publishTime" label="发布日期" sortable width="180" :align="'center'" />
                <el-table-column prop="creationTime" label="创建日期" sortable width="180" :align="'center'" />
                <el-table-column prop="opreate" label="操作" min-width="280" :align="'left'" >
                    <template #default="scope">
                        <el-button  size="small"  type="success" v-if="scope.row.status==='草稿'" @click="publishItem(scope.row.id)" round><Icon icon="publish-light" right="5px" />发布</el-button>
                        <el-button  size="small" type="primary"  @click="editItem(scope.row.id)" round><Icon icon="edit" size="25px" right="5px" />编辑</el-button>
                        <el-button  size="small" type="danger" @click="deleteItem(scope.row.id)" round><Icon icon="delete-light" right="5px" />删除</el-button>
                    </template>  
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页部分 -->
        <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :background="true"
                :disabled="false"
                layout="total, prev, pager, next, jumper"
                v-model:total="total"
                >
            </el-pagination>   
        </div>
    </div>
</template>

<script setup>
    import { ref, onBeforeMount, watch} from 'vue';
    import { ElMessage,ElMessageBox,ElTag,ElTable,ElDialog,ElForm,ElFormItem,ElTableColumn,ElButton,ElPagination,ElInput,ElDivider} from 'element-plus'
    import { addBulletin,editBulletin,deleteBulletin,getBulletinList } from '@/api/index.js';
    import Icon  from '@/components/Icon.vue';
/*模板引用的变量*/
    const ruleFormRef = ref(null);
    const tableData = ref([]);

    /*分页变量*/
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const orderBy = ref('publishTime');   
    const order = ref('desc');
/*校验*/
const rules = {
    content: [
        { required: true, message: '请输入公告内容', trigger: 'blur' },
    ]
}
let ruleForm = ref({
    id: null,
    content: '',
    status: '已发布',
});
/*编辑窗口*/
let isShowEdit = ref(false);
onBeforeMount(()=>{
    //获取公告列表
    getBulletinInfo(orderBy.value,order.value,pageSize.value,0);
});
watch(currentPage,()=>{
    refreshView();
})
/*方法*/
//获取公告列表
const getBulletinInfo=(orderBy,order,limit,offset)=>{
    getBulletinList({orderBy,order,limit,offset}).then(res=>{
        if(res.status.code === 200){
            tableData.value = res.data.info;
            total.value = res.data.total;
        }else{
            ElMessage.error(res.status.msg);
        }
    })
}
//刷新视图
const refreshView = ()=>{
    let offset = (currentPage.value-1)*pageSize.value;
    getBulletinInfo(orderBy.value,order.value,pageSize.value,offset);
}
//将草稿状态的内容修改为已发布
const publishItem = (id)=>{
    let rowData = {...tableData.value.find(item => item.id === id)};
    let param = {
        id: id,
        status: '已发布',
        content:rowData.content
    };
    editBulletin(param).then(res=>{
        if(res.status.code === 200){
            ElMessage.success(res.status.msg);
            refreshView();
        }else{
            ElMessage.error(res.status.msg);
        }
    })
}

//添加一条公告
const addItem=()=>{
    ruleForm.value.id = null;
    ruleForm.value.content = '';
    ruleForm.value.status = '';
    isShowEdit.value = true;
}
//编辑一条公告
const editItem=(id)=>{
    let rowData = {...tableData.value.find(item => item.id === id)};
    ruleForm.value = rowData;
    isShowEdit.value = true;
}
//删除公告
const deleteItem=(id)=>{
ElMessageBox.confirm(
'确定永久性删除ID为 '+id+' 的公告吗?',
'警告',
{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    closeOnClickModal:false,
    closeOnPressEscape:false,	
    draggable:true,
    showClose:false,
    type: 'warning',
    center: true,
}).then(() => {
      //向后端发起删除请求
      deleteBulletin({id}).then(res=>{
        if(res.status.code === 200){
          ElMessage.success(res.status.msg);
          refreshView();
        }else{
          ElMessage.error(res.status.msg);
        }
        
      })
}).catch(() => {
})
    
}
//提交
const submitBulletin = (flag)=>{
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            let status = flag?'草稿':'已发布';
            //先判断操作s
            if(!ruleForm.value.id){
                let param = {status,content:ruleForm.value.content};
                addBulletin(param).then(res=>{
                        if(res.status.code === 200){
                            isShowEdit.value = false;
                            refreshView();
                        }else{
                            ElMessage.error(res.status.msg);
                        }
                })
            }
            else{
                let param = {id:ruleForm.value.id,status,content:ruleForm.value.content};
                editBulletin(param).then(res=>{
                        if(res.status.code === 200){
                            ElMessage.success(res.status.msg);
                            isShowEdit.value = false;
                            refreshView();
                        }else{
                            ElMessage.error(res.status.msg);
                        }
                })
            }
        } 
    });
}
</script>

<style scoped lang='scss'>

.bulletin-wrapper{
    display: flex;
    justify-content: flex-start;
    flex-direction:column;
    height:100%;
}
.bulletin-info-container{
    display: flex;
    justify-content: space-between;
    flex-direction:column;
    height:100%;
    .add-wrapper{
        margin:20px;
    }
}


.bulletin-table{
    width:99% !important;
    height: 65vh;
    margin: 0 auto;
}
    
.pagination{
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>